<template>
	<view class="join-container">
		<!-- 内容区域 -->
		<scroll-view 
			scroll-y="true" 
			class="content-scroll" 
			enhanced="true"
			:bounces="true" 
			:scroll-with-animation="false" 
			:enable-back-to-top="true" 
			refresher-enabled
			:refresher-triggered="isRefresher" 
			@refresherrefresh="onPullDown"
		>
			<view class="main">
				<!-- 主要内容区域 -->
				<view class="main-content" :class="{ animate: contentLoaded }">
					<!-- 如果有内容则解析显示 -->
					<view v-if="content" class="content-wrapper">
						<u-parse :html="processedContent"></u-parse>
					</view>

					<!-- 加载状态 -->
					<view v-else class="loading-wrapper">
						<view class="loading-card" v-for="n in 3" :key="n" :style="{ animationDelay: (n-1) * 0.2 + 's' }">
							<view class="skeleton-avatar"></view>
							<view class="skeleton-content">
								<view class="skeleton-line long"></view>
								<view class="skeleton-line"></view>
								<view class="skeleton-line short"></view>
							</view>
						</view>
					</view>
					
				</view>
			</view>

			<!-- 底部留白，避免被按钮遮挡 -->
			<view class="bottom-spacer"></view>
		</scroll-view>
		
		<!-- 底部固定按钮 -->
		<view class="footer-section" :class="{ show: contentLoaded }">
			<view class="action-button" @click="become">
				<view class="button-content">
					<u-icon name="plus" color="#FFFFFF" size="18"></u-icon>
					<text class="button-text">申请加盟</text>
				</view>
				<view class="button-glow"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import { joinmain } from '@/api/apply.js'
	export default {
		data() {
			return {
				content: '',
				contentLoaded: false,
				isPulling: false,
				pullText: '下拉刷新',
				refreshing: false,
				processedContentCache: null,
				isRefresher: false
			}
		},
		computed: {
			processedContent() {
				if (!this.content) return ''
				if (this.processedContentCache && this.processedContentCache.original === this.content) {
					return this.processedContentCache.processed
				}
				let processed = this.content
				processed = processed.replace(/<img/g,
					'<img lazy-load="true" style="max-width: 100%; width: auto; height: auto; border-radius: 12rpx; margin: 20rpx 0; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1); display: block; box-sizing: border-box;"'
				)
				processed = processed.replace(/<p/g,
					'<p style="line-height: 1.8; margin: 16rpx 0; color: #333; font-size: 28rpx; word-wrap: break-word; word-break: break-all; max-width: 100%; box-sizing: border-box;"'
				)
				processed = processed.replace(/<div/g,
					'<div style="max-width: 100%; box-sizing: border-box; word-wrap: break-word;"')
				processed = processed.replace(/<div\s*style="display:none;">.*?<\/div>/g, '')
				processed = processed.replace(/<div\s*>\s*<\/div>/g, '')
				this.processedContentCache = {
					original: this.content,
					processed
				}
				return processed
			}
		},
		onLoad() {
			this.getjoinmain()
		},
		onUnload() {
			this.processedContentCache = null
		},
		methods: {
			async getjoinmain() {
				this.contentLoaded = false
				try {
					const { data: res } = await joinmain()
					if (res.code == 1) {
						this.content = res.data.content
						setTimeout(() => {
							this.contentLoaded = true
						}, 300)
					}
				} catch (error) {
					console.error('获取加盟内容失败:', error)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
					this.contentLoaded = true
				}
			},
			onPullDown() {
				if (this.refreshing) return
				this.refreshing = true
				this.isRefresher = true
				this.getjoinmain().then(() => {
					setTimeout(() => {
						this.isRefresher = false
						this.refreshing = false
					}, 300)
				})
			},
			become() {
				this.$ROUTELINK('apply')
			}
		}
	}
</script>

<style lang="scss">
                              page {
		background: linear-gradient(180deg, #73F0EA, rgba(255, 255, 255, 0.00));
		min-height: 100vh;
		overflow-x: hidden; // 防止水平滚动
	}

	.join-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative;
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	// 内容滚动区域 - 核心优化点
	.content-scroll {
		flex: 1;
		width: 100%;
		z-index: 10;
		position: relative;
		box-sizing: border-box;
		overflow-x: hidden;
		// 安卓滚动性能优化
		-webkit-overflow-scrolling: touch;
		transform: translateZ(0); // 启用硬件加速
		will-change: scroll-position; // 告诉浏览器提前优化滚动
	}

	.main {
		padding: 32rpx;
		box-sizing: border-box;

		.main-content {
			box-sizing: border-box;
			background: white;
			border-radius: 24rpx;
			box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;
			transform: translateY(40rpx);
			opacity: 0;
			transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
			width: 100%;
			max-width: 100%;
			transform: translateZ(0);
			will-change: transform, opacity;

			&.animate {
				transform: translateY(0) translateZ(0);
				opacity: 1;
			}

			.content-wrapper {
				padding: 30rpx;
				line-height: 1.8;
				box-sizing: border-box;
				width: 100%;
				overflow-x: hidden;
				word-wrap: break-word;
				word-break: break-all;

				// 优化HTML内容样式
				::v-deep {
					img {
						max-width: 100% !important;
						width: auto !important;
						height: auto !important;
						border-radius: 12rpx !important;
						margin: 20rpx 0 !important;
						box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1) !important;
						display: block !important;
						box-sizing: border-box !important;
					}

					p {
						line-height: 1.8 !important;
						margin: 16rpx 0 !important;
						color: #333 !important;
						font-size: 28rpx !important;
						text-align: justify !important;
						word-wrap: break-word !important;
						word-break: break-all !important;
						max-width: 100% !important;
					}

					h1, h2, h3, h4, h5, h6 {
						color: #73F0EA !important;
						margin: 30rpx 0 20rpx !important;
						font-weight: 600 !important;
					}

					strong {
						color: #73F0EA !important;
						font-weight: 600 !important;
					}

					* {
						max-width: 100% !important;
						box-sizing: border-box !important;
					}
				}
			}

			// 加载状态
			.loading-wrapper {
				padding: 30rpx;
				box-sizing: border-box;
				width: 100%;
				min-height: 800rpx; // 固定最小高度，避免切换时高度突变

				.loading-card {
					display: flex;
					align-items: flex-start;
					margin-bottom: 40rpx;
					animation: fadeInUp 0.6s ease forwards;
					opacity: 0;
					width: 100%;
					transform: translateZ(0);

					.skeleton-avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
						background-size: 200% 100%;
						animation: shimmer 1.5s infinite;
						margin-right: 24rpx;
					}

					.skeleton-content {
						flex: 1;
						min-width: 0;

						.skeleton-line {
							height: 24rpx;
							background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
							background-size: 200% 100%;
							animation: shimmer 1.5s infinite;
							border-radius: 12rpx;
							margin-bottom: 16rpx;
							width: 100%;

							&.short { width: 60%; }
							&.long { width: 90%; }
						}
					}
				}
			}
		}
	}

	// 底部留白
	.bottom-spacer {
		height: 140rpx;
	}

	// 底部按钮区域
	.footer-section {
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx 40rpx;
		// 简化背景样式，提升安卓性能
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 50%);
		transform: translateY(100%);
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		box-sizing: border-box;
		max-width: 750rpx;
		margin: 0 auto;

		&.show {
			transform: translateY(0);
		}

		.action-button {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(135deg, #73F0EA 0%, #5ee8e1 100%);
			border-radius: 50rpx;
			position: relative;
			overflow: hidden;
			box-shadow:
				0 8rpx 25rpx rgba(115, 240, 234, 0.3),
				0 2rpx 8rpx rgba(115, 240, 234, 0.2);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
			}

			.button-content {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				position: relative;
				z-index: 2;

				.button-text {
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					margin-left: 12rpx;
					letter-spacing: 2rpx;
				}
			}

			.button-glow {
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
				animation: shine 2s infinite;
			}
		}
	}

	// 动画定义
	@keyframes shimmer {
		0% { background-position: -200% 0; }
		100% { background-position: 200% 0; }
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translate3d(0, 40rpx, 0);
		}
		to {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	@keyframes shine {
		0% { left: -100%; }
		100% { left: 100%; }
	}                 
</style>
